<template>
  <div class="step">
    <div class="step_content">
      <el-row>
        <el-col :span="9">
          <el-steps size="mini" :active="active" finish-status="success">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3"></el-step>
          </el-steps>
        </el-col>
        <el-col type="flex"  align="middle" :offset="4" :span="5"
        ><el-button style="margin-top: 10px" @click="next"
          >下一步</el-button
        ></el-col
      >
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },

  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
  },
};
</script>

<style scoped>
.step {
  padding: 20px 10px;
  box-sizing: border-box;
  background: #f0f0f0;
}
.step_content {
  border: 1px solid #999;
  padding: 20px;
  border-radius: 5px;
  box-sizing: border-box;
  background: #fff;
  height: 100vh;
}
</style>